import React, { Component } from 'react';
import { NavBar, Icon } from 'antd-mobile';
import { history } from 'umi';
import BaseIcon from '../BaseIcon';

interface titleMap {
  [propName: string]: {
    title: string;
    icon: string;
  };
}

const titleMap: titleMap = {
  '/': {
    title: '首页',
    icon: 'home',
  },
  '/olist': {
    title: '商品列表',
    icon: 'list',
  },
  '/cart': {
    title: '购物车',
    icon: 'cart',
  },
  '/user': {
    title: '我的',
    icon: 'my',
  },
  '/login': {
    title: '登录',
    icon: 'login',
  },
};

interface HeaderNavProps {
  pathName: string;
}

export default class HeaderNav extends Component<HeaderNavProps> {
  search = () => {
    console.log('search');
  };
  goBack = () => {
    history.goBack();
  };

  render() {
    const { pathName } = this.props;
    const { title, icon } = titleMap[pathName];
    return (
      <NavBar
        mode="light"
        icon={<Icon type="left" />}
        onLeftClick={this.goBack}
        rightContent={<Icon type="search" onClick={this.search} />}
      >
        {
          <div>
            {/*<BaseIcon iconName={icon}></BaseIcon>*/}
            <span>{title}</span>
          </div>
        }
      </NavBar>
    );
  }
}
